<template>
  <div class="business case">
    <div class="head">
      <Header />
    </div>
    <div class="block_1 block">
      <div class="block_content">
        <div class="bc_text bc_1">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_1_text">
              <template>
                <h2 :key="item">印刷管理系统</h2>
                <h1 key="2" class="mv24">帮助企业迅速建立自己的电商平台</h1>
                <h4 key="3" class="mb10">专为印刷企业量身定制，生产自动化，KPI考核</h4>
                <h4 key="4" class="mb32">开设印刷电商，专业计价系统，积分营销体系</h4>
                <el-button key="5" type="primary" @click="toDetails(1)" class="big_btn">联系我们</el-button>
              </template>
            </template>
          </transition-group>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_2/page_2_1.png')"></el-image>
          <template v-for="item in imgs_1">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_1_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="block_2 block">
      <div class="block_content">
        <div class="bc_img bc_1">
          <el-image :src="require('@/assets/page_2/page_2_4.png')"></el-image>
          <template v-for="item in imgs_2">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_2_text">
              </el-image>
            </transition>
          </template>
        </div>
        <div class="bc_text">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_2_text">
              <template>
                <h3 :key="item">高效的接单平台</h3>
                <h4 key="2" class="mv24">SaaS印刷电商平台<br />PC及移动端跨平台融合</h4>
                <li key="3">快速部署</li>
                <li key="4">标准化产品</li>
                <li key="5">在线客服</li>
                <li key="6">SEO引流</li>
              </template>
            </template>
          </transition-group>
        </div>
      </div>
    </div>
    <div class="block_3 block">
      <div class="block_content">
        <div class="bc_text bc_1">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_3_text">
              <template>
                <h3 :key="item">专业的计价系统</h3>
                <h4 key="2" class="mv24">自助报价<br />非专业人士也可以快速下单</h4>
                <p key="3" class="mb10 f14">支持但不限于</p>
                <li key="4">传统印刷</li>
                <li key="5">数码印刷</li>
                <li key="6">大幅度产品</li>
              </template>
            </template>
          </transition-group>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_2/page_2_8.png')"></el-image>
          <template v-for="item in imgs_3">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_3_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="block_4 block">
      <div class="block_content">
        <div class="bc_img bc_1">
          <el-image :src="require('@/assets/page_2/page_2_11.png')"></el-image>
        </div>
        <div class="bc_text">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_4_text">
              <template>
                <h3 :key="item">优秀的企业ERP</h3>
                <h4 key="2" class="mv24">覆盖销售、生产<br />财务、仓库等方面</h4>
                <li key="3">完善的数据统计</li>
                <li key="4">KPI考核模型</li>
                <li key="5">生产流程追溯体系</li>
              </template>
            </template>
          </transition-group>
        </div>
      </div>
    </div>
    <div class="block_5 block">
      <div class="block_content">
        <div class="bc_text bc_1">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_5_text">
              <template>
                <h3 :key="item">智能的生产自动化</h3>
                <h4 key="2" class="mv24">借助智能印前及JDF技术<br />可对生产进行自动化布产</h4>
                <li key="3">文件自动化</li>
                <li key="4">生产流程自动化</li>
                <li key="5">JDF电子工单</li>
                <li key="6">废品、工时自动统计</li>
              </template>
            </template>
          </transition-group>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_2/page_2_12.png')"></el-image>
          <template v-for="item in imgs_4">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_5_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="block_6 flexLcc">
      <div>
        <h1>让您的业务如虎添翼，还不心动？</h1>
        <el-button type="primary" class="big_btn" @click="toDetails(1)">立即试用</el-button>
      </div>
    </div>
    <div class="foot">
      <Footer />
    </div>
  </div>
</template>
<script>
  import Header from '@/components/header';
  import Footer from '@/components/footer';
  import $ from 'jquery'
  import router from '@/router';
  export default {
    name: "web_content",
    components: {
      Header,
      Footer
    },
    data() {
      return {
        scrollNum: null,
        block_1_text: false,
        block_2_text: false,
        block_3_text: false,
        block_4_text: false,
        block_5_text: false,
        imgs_1: [{
            img: require('@/assets/page_2/page_2_2.png'),
            class: 'page_2_2',
            name: 'left',
            show: false
          },
          {
            img: require('@/assets/page_2/page_2_3.png'),
            class: 'page_2_3',
            name: 'right',
            show: false,
          }
        ],
        imgs_2: [{
            img: require('@/assets/page_2/page_2_5.png'),
            class: 'page_2_5',
            name: 'top',
          },
          {
            img: require('@/assets/page_2/page_2_6.png'),
            class: 'page_2_6',
            name: 'left',
          },
          {
            img: require('@/assets/page_2/page_2_7.png'),
            class: 'page_2_7',
            name: 'right',
          },
        ],
        imgs_3: [{
            img: require('@/assets/page_2/page_2_9.png'),
            class: 'page_2_9',
            name: 'left',
          },
          {
            img: require('@/assets/page_2/page_2_10.png'),
            class: 'page_2_10',
            name: 'right',
          },
        ],
        imgs_4: [{
            img: require('@/assets/page_2/page_2_13.png'),
            class: 'page_2_13',
            name: 'left',
          },
          {
            img: require('@/assets/page_2/page_2_14.png'),
            class: 'page_2_14',
            name: 'bottom',
          },
          {
            img: require('@/assets/page_2/page_2_15.png'),
            class: 'page_2_15',
            name: 'right',
          },
        ],
      };
    },
    mounted() {
      // 进入文字淡入
      this.block_1_text = true;
      //开启监听
      this.monitorShortcut();
    },
    destroyed() {
      this.monitorShortcut(1)
    },
    methods: {
      toDetails(type) {
        if (type == 1) {
          router.push({
            path: '/about'
          })
        }
      },
      // 监听鼠标滚轮
      monitorShortcut(type) {
        if (type) {
          $(".business").scroll(function () {});
          return
        }
        let that = this;
        $(".business").scroll(function () {
          let p = $(".business").scrollTop();
          if (p > 0) {
            //第二页显示
            that.block_2_text = true;
            let c = $(window).height();
            let blocks = $('.block');
            for (var index = 2; index < 5; index++) {
              let height = blocks[index].offsetTop;
              if (p + c > height + 500) {
                that['block_' + (index + 1) + '_text'] = true;
              }
            }
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "./css/css.scss";
  @import "./css/animation.css";

  .big_btn {
    background: #94040A !important;

    &:hover {
      background: #BD302F !important;
    }
  }
</style>